<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">物品详情</block>
		</cu-custom>

		<view class="goods_detail">
			<!-- 轮播图 --> 
			<swiper indicator-dots="true">
				<swiper-item v-for="item in swipers" :key="item.id">
					<image :src="item"><h1>{{item}}</h1></image>  
				</swiper-item>

			</swiper>

			<view
				class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border">

				<view class="cu-item" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<view class='content'>
						<image src='../../static/me/icon/xiaoxi.png' class='png' mode='aspectFit'></image>
						<text class='text-lg ' >物品名称</text> 
					</view>
					<view class="action1">
						<view>{{info.title}}</view>  
					</view>
				</view>

				<view class="cu-item" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<view class='content'>
						<image src='../../static/me/icon/xiaoxi.png' class='png' mode='aspectFit'></image>
						<text class='text-lg '>
							物品状态
						</text>
					</view>
					<view class="action">
						<view> 
							<text class="text-blue text-shadow" v-if="info.status == 0">状态:待审核</text> 
							<text class="text-blue text-shadow" v-if="info.status == 1">状态:待认领</text>    
							<text class="text-blue text-shadow" v-if="info.status == 2">状态:已完成</text>    
							<text class="text-blue text-shadow" v-if="info.status == 3">状态:审核失败</text>
						</view>
					</view>
				</view>
				<!-- <view class="cu-item" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<view class='content'>
						<image src='../../static/me/icon/xiaoxi.png' class='png' mode='aspectFit'></image>
						<text class='text-lg '>物主姓名</text>
					</view>
					<view class="action">
						<view>{{info.lostname}}</view>
					</view>
				</view> --> 
				<view class="cu-item" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<view class='content'>
						<image src='../../static/me/icon/xiaoxi.png' class='png' mode='aspectFit'></image>
						<text class='text-lg '>丢失时间</text>
					</view>
					<view class="action">
						<!-- <view>{{info.create_time}}</view> -->
						<view>{{getdate(info.create_time)}}</view> 
						
					</view>
				</view>

				<view class="cu-item" @click="phone" data-number="15178672798"
					:style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<view class='content'>
						<image src='../../static/me/icon/dengta.png' class='png' mode='aspectFit'></image>
						<text class='text-lg '>联系方式</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-blue light">{{info.mobile}}</view>
					</view>
				</view>

				<view class="cu-item" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<view class='content'>
						<image src='../../static/me/icon/xiaoxi.png' class='png' mode='aspectFit'></image>
						<text class='text-lg '>物品描述</text>
					</view>
				</view>
				<view class="cu-item" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<view class='content' style="height: 220rpx;">
						<text  class='text-lg '> {{info.about}}</text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue lg"  @click="getClaim(info.id,info.title)">认领</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				swipers: [],
				info: {}
			}
		},
		methods: {
			phone() {
				uni.makePhoneCall({
					phoneNumber: '该手机号'
				})
			},
			// async getSwipers() {
			// 	const res = await this.$myRequest({
			// 		url: '/goodsfirst/id?limit=1&page=1&sort=1&id=' + this.id
			// 	})
			// 	console.log(res)
			// 	this.swipers = res.data.data.items
			// },
			async getInfo() {
				const res = await this.$httpTokenRequest({
					url: ':8022/o/v1/order' + '/' + this.id  
				})
				// const strDate = this.getdate(res.data.data.create_time); 
				this.swipers = res.data.data.img_url; 
				console.log(this.swipers);
				this.info = res.data.data;
				console.log(this.info); 
			},
			getdate(strDate1) {
					const date = new Date(strDate1)
				var strDate = date.getFullYear() + '年' 
				strDate += date.getMonth() + 1 + '月'
				strDate += date.getDate() + '号'
				// strDate += date.getHours()  
				// strDate += date.getMinutes() + ':' 
				// strDate += date.getSeconds()
     			return strDate 
			},
			getClaim(id,title) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/Claim/index?id=' + id + '&title=' + title  
				})
			},
			onLoad(options) {   
				this.id = options.id
				// this.getSwipers() 
				this.getInfo()
			}
		},
	}
</script>

<style lang="scss">
	.goods_detail {
		swiper {
			height: 700rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.box1 {
			padding: 10px;

			.dname {
				font-size: 35rpx;
				color: $search-color;
				line-height: 80rpx;

				text:nth-child(2) {
					color: #ccc;
					font-size: 28rpx;
					// text-decoration: line-through;
					margin-left: 20rpx;
				}
			}

			.goods_name {
				font-size: 32rpx;
				line-height: 60rpx;
			}
		}

		.box2 {
			padding: 0 10px;
			font-size: 32rpx;
			line-height: 70rpx;
		}

		.line {
			height: 10rpx;
			width: 750rpx;
			background: #eee;
		}
	}
	.box {
		margin: 20upx 0;
	}
	
	.box view.cu-bar {
		margin-top: 20upx;
	}
	.action1 {  
        max-height: 130upx;
        overflow: hidden;
        word-break: break-all;  /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis;  /* 超出部分省略号 */
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
	}
</style>

